<template>
  <div class="category-page">
    <!-- 主标签导航栏 - 与首页保持一致 -->
    <div class="main-tabs">
      <div class="tabs-container">
        <RouterLink to="/category?main=男生" class="main-tab" :class="{ active: currentMainTab === '男生' }">男生</RouterLink>
        <RouterLink to="/category?main=女生" class="main-tab" :class="{ active: currentMainTab === '女生' }">女生</RouterLink>
        <RouterLink to="/category?main=出版" class="main-tab" :class="{ active: currentMainTab === '出版' }">出版</RouterLink>
        <RouterLink to="/category?main=听书" class="main-tab" :class="{ active: currentMainTab === '听书' }">听书</RouterLink>
      </div>
    </div>
    
    <!-- 功能标签导航 - 与首页保持一致 -->
    <div class="function-tabs">
      <div class="function-container">
        <RouterLink :to="`/category?main=${currentMainTab}&function=全部作品`" class="function-tab" :class="{ active: currentFunctionTab === '全部作品' }">全部作品</RouterLink>
        <RouterLink :to="`/category?main=${currentMainTab}&function=排行`" class="function-tab" :class="{ active: currentFunctionTab === '排行' }">排行</RouterLink>
        <RouterLink :to="`/category?main=${currentMainTab}&function=完本`" class="function-tab" :class="{ active: currentFunctionTab === '完本' }">完本</RouterLink>
        <RouterLink :to="`/category?main=${currentMainTab}&function=免费`" class="function-tab" :class="{ active: currentFunctionTab === '免费' }">免费</RouterLink>
        <RouterLink :to="`/category?main=${currentMainTab}&function=作家专区`" class="function-tab" :class="{ active: currentFunctionTab === '作家专区' }">作家专区</RouterLink>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 左侧区域 - 分类导航 -->
      <div class="left-panel">
        <div class="category-sidebar">
          <!-- 根据主标签显示不同的分类 -->
          <template v-if="currentMainTab === '女生'">
            <div class="category-group" v-for="(category, index) in femaleCategories" :key="index">
              <h3 class="category-title">{{ category.name }}</h3>
              <div class="category-items">
                <a href="#" class="sub-category-item" v-for="(sub, subIndex) in category.subcategories" :key="subIndex">
                  {{ sub }}
                </a>
              </div>
            </div>
          </template>
          
          <template v-else-if="currentMainTab === '男生'">
            <div class="category-group" v-for="(category, index) in maleCategories" :key="index">
              <h3 class="category-title">{{ category.name }}</h3>
              <div class="category-items">
                <a href="#" class="sub-category-item" v-for="(sub, subIndex) in category.subcategories" :key="subIndex">
                  {{ sub }}
                </a>
              </div>
            </div>
          </template>
          
          <template v-else-if="currentMainTab === '出版'">
            <div class="category-group" v-for="(category, index) in publishCategories" :key="index">
              <h3 class="category-title">{{ category.name }}</h3>
              <div class="category-items">
                <a href="#" class="sub-category-item" v-for="(sub, subIndex) in category.subcategories" :key="subIndex">
                  {{ sub }}
                </a>
              </div>
            </div>
          </template>
          
          <template v-else-if="currentMainTab === '听书'">
            <div class="category-group" v-for="(category, index) in audioCategories" :key="index">
              <h3 class="category-title">{{ category.name }}</h3>
              <div class="category-items">
                <a href="#" class="sub-category-item" v-for="(sub, subIndex) in category.subcategories" :key="subIndex">
                  {{ sub }}
                </a>
              </div>
            </div>
          </template>
        </div>
      </div>
      
      <!-- 右侧区域 - 内容显示 -->
      <div class="right-panel">
        <!-- 分类标题 -->
        <div class="category-header">
          <h2>{{ currentMainTab }} - {{ currentFunctionTab }}</h2>
        </div>
        
        <!-- 女生-排行 特殊显示 -->
        <template v-if="currentMainTab === '女生' && currentFunctionTab === '排行'">
          <!-- 榜单切换标签 -->
          <div class="ranking-tabs">
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '推荐榜' }"
              @click="handleRankingTabClick('推荐榜')"
            >
              推荐榜
            </button>
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '巅峰榜' }"
              @click="handleRankingTabClick('巅峰榜')"
            >
              巅峰榜
            </button>
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '阅读榜' }"
              @click="handleRankingTabClick('阅读榜')"
            >
              阅读榜
            </button>
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '口碑榜' }"
              @click="handleRankingTabClick('口碑榜')"
            >
              口碑榜
            </button>
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '高分榜' }"
              @click="handleRankingTabClick('高分榜')"
            >
              高分榜
            </button>
            <button 
              class="ranking-tab"
              :class="{ active: currentRankingTab === '热搜榜' }"
              @click="handleRankingTabClick('热搜榜')"
            >
              热搜榜
            </button>
          </div>
          
          <!-- 榜单内容 -->
            <div class="ranking-content">
              <div 
                class="ranking-section" 
                v-for="(ranking, index) in rankings" 
                :key="index"
                v-if="ranking.name === currentRankingTab"
              >
                <div class="ranking-header">
                  <h3>{{ ranking.name }}</h3>
                  <a href="#" class="more-link">更多 ></a>
                </div>
                <div class="ranking-list">
                  <div 
                    class="ranking-item" 
                    v-for="(book, bookIndex) in ranking.books" 
                    :key="bookIndex"
                    :class="{ 'top-rank': bookIndex < 3 }"
                  >
                    <span class="rank-num" :class="getRankClass(bookIndex)">{{ bookIndex + 1 }}</span>
                    <div class="book-info">
                      <div class="book-meta">
                        <h4>{{ book.title }}</h4>
                        <p class="author">{{ book.author }}</p>
                        <p class="category">{{ book.category }} · {{ book.status }}</p>
                      </div>
                      <p class="description">{{ book.description }}</p>
                      <div class="book-stats">
                        <span v-for="(stat, statIndex) in book.stats" :key="statIndex">{{ stat }}</span>
                      </div>
                    </div>
                    <div class="book-cover">
                      <img :src="book.coverUrl" :alt="book.title" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </template>
        
        <!-- 其他情况显示推荐作品 -->
        <template v-else>
          <div class="recommended-works">
            <div class="work-item" v-for="i in 12" :key="i">
              <div class="work-cover">
                <img :src="`https://picsum.photos/id/${i + 50}/200/300`" alt="作品封面" />
              </div>
              <div class="work-info">
                <h4>推荐作品 {{ i }}</h4>
                <p>作者名称</p>
                <div class="work-stats">
                  <span>{{ Math.floor(Math.random() * 10000) }} 阅读</span>
                  <span>{{ Math.floor(Math.random() * 1000) }} 收藏</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter, RouterLink, onBeforeRouteUpdate } from 'vue-router'
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'CategoryView',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 当前选中的主标签、功能标签和榜单标签
    const currentMainTab = ref('男生')
    const currentFunctionTab = ref('全部作品')
    const currentRankingTab = ref('推荐榜')
    
    // 监听路由参数变化
    onMounted(() => {
      updateTabsFromRoute()
    })
    
    // 监听路由参数变化，确保在组件内路由变化时也能更新标签状态
    onBeforeRouteUpdate((to) => {
      if (to.query.main) {
        currentMainTab.value = to.query.main
      }
      if (to.query.function) {
        currentFunctionTab.value = to.query.function
      }
    })
    
    const updateTabsFromRoute = () => {
      if (route.query.main) {
        currentMainTab.value = route.query.main
      }
      if (route.query.function) {
        currentFunctionTab.value = route.query.function
      }
    }
    
    // 获取排名样式类名
    const getRankClass = (index) => {
      if (index === 0) return 'first'
      if (index === 1) return 'second'
      if (index === 2) return 'third'
      return ''
    }
    
    // 处理榜单标签点击
    const handleRankingTabClick = (tab) => {
      currentRankingTab.value = tab
    }
    
    // 女生排行数据
    const rankings = ref([
      {
        name: '推荐榜',
        books: [
          {
            title: '《余生请多指教》',
            author: '墨宝非宝',
            category: '现代言情',
            status: '已完结',
            description: '林之校喜欢的那个医生终于回国了，他还是那么耀眼，那么温柔...',
            coverUrl: 'https://picsum.photos/id/64/200/300',
            stats: ['999.8万阅读', '98.6万收藏', '9.8分']
          },
          {
            title: '《司藤》',
            author: '尾鱼',
            category: '奇幻言情',
            status: '已完结',
            description: '司藤，半妖半人，沉睡八十年后苏醒，与秦放的纠缠...',
            coverUrl: 'https://picsum.photos/id/65/200/300',
            stats: ['886.5万阅读', '87.3万收藏', '9.7分']
          },
          {
            title: '《余生请多指教》',
            author: '墨宝非宝',
            category: '现代言情',
            status: '已完结',
            description: '林之校喜欢的那个医生终于回国了，他还是那么耀眼，那么温柔...',
            coverUrl: 'https://picsum.photos/id/66/200/300',
            stats: ['777.2万阅读', '76.4万收藏', '9.6分']
          },
          {
            title: '《他从火光中走来》',
            author: '耳东兔子',
            category: '都市言情',
            status: '已完结',
            description: '消防员和歌手的爱情故事，热血与浪漫的交织...',
            coverUrl: 'https://picsum.photos/id/67/200/300',
            stats: ['666.9万阅读', '65.8万收藏', '9.5分']
          },
          {
            title: '《长相思》',
            author: '桐华',
            category: '古代言情',
            status: '已完结',
            description: '一场跨越千年的爱情，一个关于等待与守护的故事...',
            coverUrl: 'https://picsum.photos/id/68/200/300',
            stats: ['555.7万阅读', '54.3万收藏', '9.4分']
          }
        ]
      },
      {
        name: '巅峰榜',
        books: [
          {
            title: '《伪装学渣》',
            author: '木瓜黄',
            category: '青春校园',
            status: '已完结',
            description: '两位高颜值学霸伪装成学渣的搞笑故事...',
            coverUrl: 'https://picsum.photos/id/69/200/300',
            stats: ['1200万阅读', '118万收藏', '9.9分']
          },
          {
            title: '《默读》',
            author: 'Priest',
            category: '悬疑推理',
            status: '已完结',
            description: '骆闻舟与费渡联手破案，互相救赎的故事...',
            coverUrl: 'https://picsum.photos/id/70/200/300',
            stats: ['1100万阅读', '108万收藏', '9.8分']
          },
          {
            title: '《破云》',
            author: '淮上',
            category: '悬疑',
            status: '已完结',
            description: '现代都市背景下的悬疑故事，江停与严峫的冒险...',
            coverUrl: 'https://picsum.photos/id/71/200/300',
            stats: ['1000万阅读', '98万收藏', '9.7分']
          },
          {
            title: '《撒野》',
            author: '巫哲',
            category: '青春校园',
            status: '已完结',
            description: '两个少年互相救赎，共同成长的故事...',
            coverUrl: 'https://picsum.photos/id/72/200/300',
            stats: ['950万阅读', '92万收藏', '9.6分']
          },
          {
            title: '《残次品》',
            author: 'Priest',
            category: '科幻',
            status: '已完结',
            description: '未来星际背景下的宏大叙事...',
            coverUrl: 'https://picsum.photos/id/73/200/300',
            stats: ['900万阅读', '88万收藏', '9.5分']
          }
        ]
      },
      {
        name: '阅读榜',
        books: [
          {
            title: '《偷偷藏不住》',
            author: '竹已',
            category: '青春校园',
            status: '已完结',
            description: '桑稚暗恋段嘉许，从初中到大学的故事...',
            coverUrl: 'https://picsum.photos/id/74/200/300',
            stats: ['1500万阅读', '145万收藏', '9.7分']
          },
          {
            title: '《难哄》',
            author: '竹已',
            category: '现代言情',
            status: '已完结',
            description: '温以凡与桑延的破镜重圆故事...',
            coverUrl: 'https://picsum.photos/id/75/200/300',
            stats: ['1400万阅读', '135万收藏', '9.6分']
          },
          {
            title: '《偷偷藏不住》',
            author: '竹已',
            category: '青春校园',
            status: '已完结',
            description: '桑稚暗恋段嘉许，从初中到大学的故事...',
            coverUrl: 'https://picsum.photos/id/76/200/300',
            stats: ['1300万阅读', '125万收藏', '9.5分']
          },
          {
            title: '《我和我的猫都想你了》',
            author: '三千大梦叙平生',
            category: '现代言情',
            status: '连载中',
            description: '一个关于猫和爱情的治愈故事...',
            coverUrl: 'https://picsum.photos/id/77/200/300',
            stats: ['1200万阅读', '115万收藏', '9.4分']
          },
          {
            title: '《恰似寒光遇骄阳》',
            author: '囧囧有妖',
            category: '现代言情',
            status: '已完结',
            description: '重生题材，主角强势归来...',
            coverUrl: 'https://picsum.photos/id/78/200/300',
            stats: ['1100万阅读', '105万收藏', '9.3分']
          }
        ]
      },
      {
        name: '口碑榜',
        books: [
          {
            title: '《云边有个小卖部》',
            author: '张嘉佳',
            category: '文学',
            status: '已完结',
            description: '云边镇的温暖故事，关于亲情与友情...',
            coverUrl: 'https://picsum.photos/id/79/200/300',
            stats: ['999万阅读', '98万收藏', '9.9分']
          },
          {
            title: '《活着》',
            author: '余华',
            category: '文学',
            status: '已完结',
            description: '福贵的人生经历，展现生命的坚韧...',
            coverUrl: 'https://picsum.photos/id/80/200/300',
            stats: ['988万阅读', '97万收藏', '9.9分']
          },
          {
            title: '《云边有个小卖部》',
            author: '张嘉佳',
            category: '文学',
            status: '已完结',
            description: '云边镇的温暖故事，关于亲情与友情...',
            coverUrl: 'https://picsum.photos/id/81/200/300',
            stats: ['977万阅读', '96万收藏', '9.8分']
          },
          {
            title: '《解忧杂货店》',
            author: '东野圭吾',
            category: '日本文学',
            status: '已完结',
            description: '神秘杂货店，为来信者解忧...',
            coverUrl: 'https://picsum.photos/id/82/200/300',
            stats: ['966万阅读', '95万收藏', '9.7分']
          },
          {
            title: '《百年孤独》',
            author: '加西亚·马尔克斯',
            category: '外国文学',
            status: '已完结',
            description: '魔幻现实主义文学经典...',
            coverUrl: 'https://picsum.photos/id/83/200/300',
            stats: ['955万阅读', '94万收藏', '9.6分']
          }
        ]
      },
      {
        name: '高分榜',
        books: [
          {
            title: '《红楼梦》',
            author: '曹雪芹',
            category: '古典名著',
            status: '已完结',
            description: '中国古典四大名著之一，讲述贾、史、王、薛四大家族的兴衰...',
            coverUrl: 'https://picsum.photos/id/84/200/300',
            stats: ['1000万阅读', '99万收藏', '9.9分']
          },
          {
            title: '《西游记》',
            author: '吴承恩',
            category: '古典名著',
            status: '已完结',
            description: '唐僧师徒四人西天取经的故事...',
            coverUrl: 'https://picsum.photos/id/85/200/300',
            stats: ['999万阅读', '98万收藏', '9.8分']
          },
          {
            title: '《红楼梦》',
            author: '曹雪芹',
            category: '古典名著',
            status: '已完结',
            description: '中国古典四大名著之一，讲述贾、史、王、薛四大家族的兴衰...',
            coverUrl: 'https://picsum.photos/id/86/200/300',
            stats: ['998万阅读', '97万收藏', '9.8分']
          },
          {
            title: '《三体》',
            author: '刘慈欣',
            category: '科幻',
            status: '已完结',
            description: '中国科幻文学的里程碑作品...',
            coverUrl: 'https://picsum.photos/id/87/200/300',
            stats: ['997万阅读', '96万收藏', '9.7分']
          },
          {
            title: '《围城》',
            author: '钱钟书',
            category: '现代文学',
            status: '已完结',
            description: '方鸿渐的人生困境与婚姻围城...',
            coverUrl: 'https://picsum.photos/id/88/200/300',
            stats: ['996万阅读', '95万收藏', '9.6分']
          }
        ]
      },
      {
        name: '热搜榜',
        books: [
          {
            title: '《长月烬明》',
            author: '藤萝为枝',
            category: '古代言情',
            status: '已完结',
            description: '澹台烬与黎苏苏的虐恋故事...',
            coverUrl: 'https://picsum.photos/id/89/200/300',
            stats: ['999万阅读', '98万收藏', '9.5分']
          },
          {
            title: '《狂飙》',
            author: '徐纪周',
            category: '都市',
            status: '已完结',
            description: '高启强从鱼贩子到黑老大的崛起之路...',
            coverUrl: 'https://picsum.photos/id/90/200/300',
            stats: ['988万阅读', '97万收藏', '9.4分']
          },
          {
            title: '《长月烬明》',
            author: '藤萝为枝',
            category: '古代言情',
            status: '已完结',
            description: '澹台烬与黎苏苏的虐恋故事...',
            coverUrl: 'https://picsum.photos/id/91/200/300',
            stats: ['977万阅读', '96万收藏', '9.3分']
          },
          {
            title: '《莲花楼》',
            author: '藤萍',
            category: '武侠',
            status: '已完结',
            description: '李莲花的江湖故事...',
            coverUrl: 'https://picsum.photos/id/92/200/300',
            stats: ['966万阅读', '95万收藏', '9.2分']
          },
          {
            title: '《偷偷藏不住》',
            author: '竹已',
            category: '青春校园',
            status: '已完结',
            description: '桑稚暗恋段嘉许，从初中到大学的故事...',
            coverUrl: 'https://picsum.photos/id/93/200/300',
            stats: ['955万阅读', '94万收藏', '9.1分']
          }
        ]
      }
    ])
    
    // 女性分类数据
    const femaleCategories = ref([
      {
        name: '纯爱',
        subcategories: ['腹黑豪门世家', '医生', '律师', '总裁', '校园', '电竞', '娱乐圈', '古代王爷']
      },
      {
        name: '古代言情',
        subcategories: ['穿越时空', '宫斗宅斗', '女强女帝', '甜宠日常', '修真仙侠', '科举升官', '经商种田', '贵女重生']
      },
      {
        name: '现代言情',
        subcategories: ['都市情缘', '甜宠文', '破镜重圆', '职场励志', '婚恋嫁娶', '高干军婚', '豪门世家', '校园甜文']
      },
      {
        name: '幻想言情',
        subcategories: ['仙侠奇缘', '玄幻言情', '末世危机', '星际穿越', '未来世界', '魔法奇幻', '灵异神怪', '快穿系统']
      },
      {
        name: '短篇',
        subcategories: ['短篇合集', '总裁豪门', '古代情缘', '现代都市', '奇幻仙侠', '悬疑推理', '科幻未来', '甜宠小剧场']
      }
    ])
    
    // 男性分类数据
    const maleCategories = ref([
      {
        name: '玄幻',
        subcategories: ['东方玄幻', '异界大陆', '西方奇幻', '转世重生', '修真文明', '高武世界', '王朝争霸', '神话修真']
      },
      {
        name: '都市',
        subcategories: ['都市生活', '异术超能', '都市重生', '商战职场', '都市修真', '娱乐明星', '都市异能', '校园风云']
      },
      {
        name: '仙侠',
        subcategories: ['修真文明', '古典仙侠', '现代修真', '洪荒封神', '神话修真', '奇幻修真', '修真日常', '仙风道骨']
      },
      {
        name: '游戏',
        subcategories: ['虚拟网游', '电子竞技', '游戏异界', '游戏主播', '游戏系统', '游戏职场', '游戏人生', '游戏王朝']
      },
      {
        name: '科幻',
        subcategories: ['星际文明', '末世危机', '进化变异', '未来世界', '时空穿梭', '古武机甲', '星际战争', '科技文明']
      }
    ])
    
    // 出版分类数据
    const publishCategories = ref([
      {
        name: '文学',
        subcategories: ['小说', '散文', '诗歌', '杂文', '文学理论', '作品集', '中外名著', '现当代文学']
      },
      {
        name: '社科',
        subcategories: ['历史', '哲学', '政治', '经济', '军事', '法律', '心理', '教育']
      },
      {
        name: '生活',
        subcategories: ['美食', '健康', '励志', '心理自助', '旅行', '时尚', '家居', '育儿']
      },
      {
        name: '少儿',
        subcategories: ['绘本', '童话故事', '儿童文学', '科普百科', '少儿英语', '益智游戏', '漫画绘本', '成长励志']
      },
      {
        name: '经管',
        subcategories: ['成功励志', '市场营销', '投资理财', '管理', '职场', '创业', '经济理论', '财务管理']
      }
    ])
    
    // 听书分类数据
    const audioCategories = ref([
      {
        name: '有声小说',
        subcategories: ['都市言情', '悬疑推理', '玄幻仙侠', '历史军事', '科幻末世', '恐怖惊悚', '武侠江湖', '古代言情']
      },
      {
        name: '相声评书',
        subcategories: ['相声', '评书', '单口相声', '对口相声', '群口相声', '传统评书', '新评书', '方言评书']
      },
      {
        name: '知识讲座',
        subcategories: ['历史人文', '科普', '商业财经', '心理哲学', '职场成长', '教育学习', '健康养生', '亲子教育']
      },
      {
        name: '儿童故事',
        subcategories: ['童话故事', '寓言故事', '睡前故事', '成语故事', '神话故事', '科普故事', '儿歌童谣', '绘本故事']
      },
      {
        name: '其他',
        subcategories: ['广播剧', '有声剧', '脱口秀', '播客', '有声漫画', '有声散文', '诗歌朗诵', '朗读']
      }
    ])
    
    return {
      RouterLink,
      currentMainTab,
      currentFunctionTab,
      currentRankingTab,
      femaleCategories,
      maleCategories,
      publishCategories,
      audioCategories,
      rankings,
      getRankClass
    }
  }
}
</script>

<style scoped>
/* 分类页面样式 */
.category-page {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 主标签导航样式 - 复用首页样式 */
.main-tabs {
  background-color: #fff;
  border-bottom: 2px solid #e81742;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
}

.main-tab {
  display: inline-block;
  padding: 18px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
}

.main-tab:hover {
  color: #e81742;
}

.main-tab.active {
  color: #e81742;
  font-weight: 600;
}

.main-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e81742;
}

/* 功能标签导航样式 - 复用首页样式 */
.function-tabs {
  background-color: #f8f8f8;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.function-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
  gap: 20px;
  overflow-x: auto;
}

.function-tab {
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 16px;
  transition: all 0.3s;
}

.function-tab:hover {
  color: #e81742;
  background-color: #f0f0f0;
}

.function-tab.active {
  color: #fff;
  background-color: #e81742;
}

/* 内容容器 */
.content-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.left-panel {
  flex: 1;
}

.right-panel {
  flex: 3;
}

/* 左侧分类导航 */
.category-sidebar {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-group {
  margin-bottom: 25px;
}

.category-group:last-child {
  margin-bottom: 0;
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e81742;
}

.category-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sub-category-item {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  background-color: #f8f8f8;
  transition: all 0.3s ease;
}

.sub-category-item:hover {
  color: #fff;
  background-color: #e81742;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(232, 23, 66, 0.2);
}

/* 右侧内容区域 */
.category-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

/* 榜单切换标签样式 */
.ranking-tabs {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex-wrap: wrap;
}

.ranking-tab {
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  background-color: #f8f8f8;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ranking-tab:hover {
  background-color: #fff;
  border-color: #e81742;
  color: #e81742;
}

.ranking-tab.active {
  background-color: #e81742;
  border-color: #e81742;
  color: #fff;
}

/* 榜单内容区域 */
.ranking-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.ranking-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e81742;
}

.ranking-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #e81742;
  text-decoration: none;
  font-size: 14px;
}

.more-link:hover {
  text-decoration: underline;
}

/* 榜单列表样式 */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ranking-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.ranking-item.top-rank {
  border-color: #e81742;
  background-color: #fff5f5;
}

/* 排名数字样式 */
.rank-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #999;
  background-color: #f0f0f0;
  border-radius: 50%;
  flex-shrink: 0;
}

.rank-num.first {
  background-color: #ff6b6b;
  color: #fff;
}

.rank-num.second {
  background-color: #ffd166;
  color: #fff;
}

.rank-num.third {
  background-color: #06d6a0;
  color: #fff;
}

/* 书籍信息样式 */
.book-info {
  flex: 1;
  margin-right: 15px;
}

.book-meta h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.author {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #e81742;
}

.category {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #999;
}

.description {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

/* 书籍封面样式 */
.book-cover {
  width: 80px;
  height: 120px;
  overflow: hidden;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ranking-item:hover .book-cover img {
  transform: scale(1.05);
}

/* 推荐作品列表 */
.recommended-works {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.work-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.work-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.work-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.work-item:hover .work-cover img {
  transform: scale(1.1);
}

.work-info {
  padding: 15px;
}

.work-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.work-info p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #999;
}

.work-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .recommended-works {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .book-cover {
    width: 70px;
    height: 105px;
  }
}

@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }
  
  .category-items {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .recommended-works {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .function-container {
    padding: 0 15px;
  }
  
  .ranking-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .rank-num {
    margin-bottom: 10px;
  }
  
  .book-info {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .book-cover {
    width: 100px;
    height: 150px;
    align-self: center;
  }
  
  .ranking-tabs {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .category-items {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .recommended-works {
    grid-template-columns: 1fr;
  }
  
  .tabs-container {
    padding: 0 10px;
  }
  
  .main-tab {
    padding: 15px 15px;
    font-size: 14px;
  }
  
  .ranking-tab {
    padding: 6px 15px;
    font-size: 13px;
  }
  
  .ranking-header h3 {
    font-size: 16px;
  }
  
  .book-meta h4 {
    font-size: 15px;
  }
}
</style>